<%@ page language="java" contentType="text/html; charset=utf-8" session="true" isELIgnored="false"
         pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<head>
    <title>评论图查看工具 v1.2</title>
</head>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        function get(page){
            var url =  $("#url").val();
            $.post("/get/"+page,{url:url},function (data) {
                if(data=="ok"){
                    var result = data;
                    window.location.reload()
                }else{
                    alert("网址错误或者无评论图！");
                }
            })
        }
        function download(){
            var downloadUrl =  $("#downloadUrl").val();
            $.post("/download",{downloadUrl:downloadUrl},function (data) {
                if(data=="ok"){
                    var result = data;
                    alert("保存成功！")
                }else{
                    alert("保存失败！");
                }
            })
        }
        function change(number){
            if(number==1){
                document.getElementById("img").style='height: 50%';
            }
            if(number==2){
                document.getElementById("img").style='height: 100%';
            }
            if(number==3){
                document.getElementById("img").style='height: 140%';
            }

        }

    </script>
<html>
<body>
    <div align="center" style="margin-top: 5px;">
        <hr style="height: 2px" color="deepskyblue">
        <div>
            <h2 style="color: deepskyblue">评论图查看工具 v1.2</h2>
            <p style="margin-top: -10px">此版本仅支持京东商品</p>
            <p style="margin-top: -10px">请输入京东商品网址，例:https://item.jd.com/100010341060.html</p>
        </div>
        <div style="margin-top: -10px">
            <input type="text" style="width: 300px;" placeholder="" id="url" value="${url}"/>
            <input type="button" style="width: 80px" value="确定" onclick="get('99999')" />
        </div>
        <div style="margin-top: 10px">
            <input type="text" style="width: 300px;" placeholder="保存路径,例：C:\Users\Wannabee\Desktop" id="downloadUrl" value="${downloadUrl}"/>
            <input type="button" style="width: 80px" value="保存至本地" onclick="download()" />
        </div>
        <div style="margin-top: 10px">
            <input type="button" value="小图查看" onclick="change('1')" />
            <input type="button" value="中图查看" onclick="change('2')" />
            <input type="button" value="大图查看" onclick="change('3')" />
        </div>
        <div  style="margin-top: 10px">
            第0${page}页&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="上一页" onclick="get('-1')" />
            <input type="button" value="下一页" onclick="get('1')" />
        </div>
        <hr style="height: 2px;margin-top: 10px" color="deepskyblue">
        <div id="img" style="margin-top: 30px;height: 50%" >
            <c:forEach items="${list}" var="imageUrl">
                <img src="${imageUrl}" height="80%">
            </c:forEach>
        </div>
    </div>
</body>
</html>
